<template>
  <div class="my-container w-full h-full px-6">
    <div class="header w-full">
      <a-form-model
        class="w-full flex flex-col"
        :model="form"
        ref="form"
        v-bind="layout"
        labelAlign="right"
      >
      <div class="dis-flex line-h-sele">
        <div class="dis-flex">
          <div class="dis-flex ali-c">推优内容：</div>
          <div class="dis-flex ali-c flex-1">
            <a-input v-model="form.name" placeholder="推优内容"></a-input>
          </div>
        </div>
        <div class="dis-flex">
          <div class="dis-flex ali-c">审核理由：</div>
          <div class="dis-flex ali-c flex-1">
            <a-input v-model="form.reason" placeholder="审核理由"></a-input>
          </div>
        </div>
        <div class="dis-flex">
          <div class="dis-flex ali-c">说明：</div>
          <div class="dis-flex ali-c flex-1">
            <a-input v-model="form.note" placeholder="说明"></a-input>
          </div>
        </div>
        <div class="flex justify-end items-center text-right">
          <a-button class="button-item mr-4" @click="reset">清空</a-button>
          <a-button class="button-item" type="primary" @click="search" >搜索</a-button>
        </div>
      </div>
      </a-form-model>
    </div>
    <a-divider dashed />
    <div class="content">
      <a-table
        :columns="columns"
        :data-source="data"
        rowKey="id"
        :pagination="false"
        :row-selection="{ onChange: onSelectChange }"
      >
        <template slot="member" slot-scope="text, record">
          {{getMemberName(record.memberId)}}
        </template>
        <template slot="grade" slot-scope="text, record">
          <span v-if="record.grade == 1">中央广播电视总台</span>
          <span v-else-if="record.grade == 2">广电总局</span>
          <span v-else-if="record.grade == 3">中直机关</span>
          <span v-else-if="record.grade == 4">全国</span>
          <span v-else>--</span>
        </template>
        <template slot="type" slot-scope="text, record">
          <span v-if="record.type == 1">奖励</span>
          <span v-else-if="record.type == 2">处分</span>
          <span v-else>--</span>
        </template>
        <template slot="status" slot-scope="text, record">
          <span v-if="record.status == 1"><div class="status-1" />已提交</span>
          <span v-else-if="record.status == 2"><div class="status-2" />通过</span>
          <span v-else-if="record.status == 3"><div class="status-3" />驳回</span>
          <span v-else-if="record.status == 0"><div class="status-0" />未提交</span>
          <span v-else>--</span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="flex">
            <a-popconfirm
              title="确定要通过?"
              ok-text="通过"
              cancel-text="取消"
              @confirm="status(record, 2)"
              @cancel="cancel"
            >
              <a-button type="link" style="color: rgba(0, 0, 0, 0.65)">
                通过
              </a-button>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定要驳回选中记录么?"
              ok-text="驳回"
              cancel-text="取消"
              @confirm="status(record, 3)"
              @cancel="cancel"
            >
              <a-button type="link" style="color: rgba(0, 0, 0, 0.65)">
                驳回
              </a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
      <a-row>
        <a-col :span="24" class="text-right mt-8">
          <a-pagination
            show-quick-jumper
            show-size-changer
            :show-total="pagination.showTotal"
            size="small"
            v-model="pagination.current"
            :default-current="pagination.current"
            :total="pagination.total"
            show-less-items
            @change="search"
            @showSizeChange="onShowSizeChange"
          />
        </a-col>
      </a-row>
    </div>
    <a-modal
      title="推优信息"
      v-if="visible"
      :visible="visible"
      width="640px"
      height="672px"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :destroyOnClose="true"
    >
      <Form ref="record" :form="record" @pass="pass" @reject="reject" />
    </a-modal>
  </div>
</template>

<script>
import Form from "../form";
import {member} from "../../../components/mixins/member"
export default {
  name: "List",
  mixins: [member],
  components: { Form },
  data() {
    return {
      form: {},
      record: {},
      data: [],
      selectedRowKeys: [],
      pagination: {
        defaultPageSize: 10,
        showTotal: (total) => `总 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "50", "100"],
        current: 1,
        size: 10,
        total: 0,
      },
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: "团员",
          dataIndex: "memberId",
          scopedSlots: { customRender: "member" },
        },
        {
          title: "推优内容",
          dataIndex: "name",
        },
        {
          title: "级别",
          dataIndex: "grade",
          scopedSlots: { customRender: "grade" },
        },
        // {
        //   title: "审核理由",
        //   dataIndex: "reason",
        // },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    reject() {
      this.confirmLoading = false;
    },
    pass() {
      this.visible = false;
      this.confirmLoading = false;
      this.search();
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.$refs.record.save();
    },
    handleCancel(e) {
      this.visible = false;
    },
    onSelectChange(keys, rows) {
      this.selectedRowKeys = keys;
    },
    remove(row) {
      this.$ajax({
        url: this.$api.excellence.deleteByIds,
        data: this.selectedRowKeys,
        success: (result) => {
          this.$message.success("操作成功");
          this.selectedRowKeys = [];
          this.search();
        },
      });
    },
    deleteList(row) {
      this.$ajax({
        url: this.$api.excellence.deleteByIds,
        data: [row.id],
        success: (result) => {
          this.$message.success("操作成功");
          this.selectedRowKeys = [];
          this.pagination.current = 1;
          this.search();
        },
      });
    },
    add() {
      this.record = {};
      this.visible = true;
    },
    edit(row) {
      this.record = row;
      this.visible = true;
      // this.$router.push({path: `/member/form`, query: row});
    },
    onShowSizeChange(current, size) {
      this.pagination.size = size;
      this.search();
    },
    search(current, size) {
      this.$ajax({
        url: this.$api.excellence.findPage,
        data: Object.assign(
          {
            current: current || this.pagination.current,
            size: size || this.pagination.size,
            status: 1,
          },
          this.form
        ),
        success: (result) => {
          this.data = result.records;
          const pager = { ...this.pagination };
          pager.total = result.total;
          pager.current = result.current;
          pager.size = result.size;
          this.pagination = pager;
        },
      });
    },
    cancel() {
      this.$message.warning("您已取消操作");
    },
    reset() {
      this.form = this.$options.data().form;
          this.pagination.current = 1;
       this.pagination.size = 10;
      this.search()
    },
    status(data, val) {
      data.status = val;
      this.$ajax({
        url: this.$api.excellence.saveOrUpdate,
        data,
        success: (result) => {
          this.$message.success("操作成功");
          this.search();
        },
        fail: (err) => {
          this.$message.success(err);
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.my-container {
  .header {
    .ant-form {
      .ant-form-item {
        input {
          // width: 420px;
          height: 40px;
        }
        /deep/ .ant-form-item-label {
          width: 80px !important;
        }
      }
      .button-item {
        height: 40px;
      }
    }
  }
  .ant-divider {
    margin: 8px 0;
  }
  .content {
    display: flex;
    flex-direction: column;
    .ant-btn {
      display: flex;
      align-items: center;
    }
    .ant-table-wrapper {
      margin-top: 16px;
      // /deep/ .ant-table-thead > tr > th {
      //   font-weight: bold !important;
      // }
      /deep/ .ant-table-content {
        .ant-table-body {
          .ant-table-thead {
            tr {
              th {
                font-weight: bold !important;
              }
            }
          }
        }
      }
    }
    /deep/ .ant-pagination-item-link {
      display: flex;
      align-items: center;
    }
  }
  .select-main {
    display: flex;
    justify-content: space-between;
    line-height: 150px;
  }
  .dis-flex {
    display: flex;
    justify-content: space-between;
  }
  .ali-c {
    align-items: center;
  }
  .flex-1 {
    flex: 1;
    margin-left: 8px;
  }
  .line-h-sele {
    height: 60px;
  }
}
</style>